<template>
  <div class="wrapper">
      <button @click="handler">{{ counter }}</button>
      <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data(){
      return {
          counter: 1,
          message: ''
      }
  },
  methods:{
    handler(){
        this.counter++;
    }
  },
  watch: {
    counter(target,original){
        console.log( 'original: ' , original , ', target: ' , target );
        if( target % 2 == 0 ) {
            this.message = '偶数';
        } else {
            this.message = '奇数';
        }
    }
  },
  setup(props,context){

  }
}
</script>


<style scoped>
.wrapper {
  margin: 15px;
  border: 1px solid #dedede;
  box-shadow: 0 0 20px -10px blue;
}
</style>